<template>
  <div :style="{ minHeight: '820px', width: '100%', position: 'relative' }" class="map-container">
    <map-draw ref="mapDraw" />
    <list-drawer v-if="routeName==='event-alarm-map'" v-show="isRightDrawerShow" @handleDrawer="handleDrawer" />
    <details-drawer v-if="routeName==='event-alarm-details-@id'" v-show="isRightDrawerShow" @handleDrawer="handleDrawer" />
    <div class="handle leftHandle" v-show="leftVisible" @click="clickLeft">
      <a-icon class="close-icon" type="right" title="展开" />
    </div>
    <div class="handle rightHandle" v-show="rightVisible" @click="clickRight">
      <a-icon class="close-icon" type="left" title="展开" />
    </div>
  </div>
</template>

<script>
import mapDraw from '../modules/mapDraw'
import listDrawer from './modules/listDrawer'
import detailsDrawer from './modules/detailsDrawer'
export default {
  components: { mapDraw, listDrawer, detailsDrawer },
  data() {
    return {
      reloading: true,
      isAlarmListShow: false,
      isRightDrawerShow: true,
      leftVisible: false,
      rightVisible: false,
      calendarValue: '',
      isShowsignInDel: false,
    }
  },
  created() {},
  mounted() {
    // let doc = document.getElementsByClassName('ant-layout-content')
    // let doc1 = document.getElementsByClassName('map-container')
    // console.log(doc.offsetHeight)
    // console.log(doc1.offsetHeight)
    // let mapHeight = window.innerHeight
    // doc.style.height = `${mapHeight}px`
    // window.onresize = ()=> {
    //   let winHeight = window.innerHeight
    //   doc.style.height = `${winHeight}px`
    // }
  },
  computed: {
    routeName() {
      console.log(this.$route)
      let route = this.$route.name
      return route
    }
  },
  methods: {
    modalFormOk() {},
    closeAlarmList() {
      this.isAlarmListShow = false
    },
    clickLeft() {
      this.isAlarmListShow = true
    },
    clickRight() {
      this.isRightDrawerShow = true
      this.rightVisible = false
      // this.isDetail1Show = true
    },
    handleDrawer() {
      this.isRightDrawerShow = false
      this.rightVisible = true
    },
    /** 重新加载组件 */
    reload() {
      this.reloading = false
      this.$nextTick(() => (this.reloading = true))
    },
    filterMultiDictText(dictCode, text) {
      if (!text && text !== 0) return
      let datas = getDictItemsFromCache(dictCode)
      // return this.$filterMultiDictText(datas, text)
      return this.$filterDictText(datas, text)
    },
    getItemsFrom(datas, key) {
      let item = datas.filter((t) => t['value'] == key)
      if (item && item.length > 0) {
        return item[0]['text']
      }
    },
    headerRender({ value, type, onChange, onTypeChange }) {
      return ''
    },
  },
}
</script>
<style lang="less" scoped>
.drawer {
  width: 600px;
  position: absolute;
  right: -12px;
  top: -12px;
  bottom: 0;
  background-color: #fff;
  border-left: 1px #e8e8e8 solid;
  overflow-x: auto;
  .drawer-title {
    background-color: #fff;
    border-bottom: 1px #e8e8e8 solid;
    display: flex;
    padding: 16px 20px;
    justify-content: space-between;
    align-items: center;
    span {
      font-size: 16px;
      font-weight: 600;
    }
    .close-icon {
      color: #333;
      font-size: 16px;
    }
  }
  .drawer-body {
    padding: 20px;
    position: relative;
  }
}
.handle {
  position: absolute;
  display: inline-block;
  top: 0;
  z-index: 10;
  background: rgba(0, 0, 0, 0.6);
  height: 100%;
  cursor: pointer;
  transition: 0.5s;
  display: flex;
  flex-direction: column;
  justify-content: center;
  .close-icon {
    font-size: 20px;
    color: #fff;
  }
  &.leftHandle {
    left: 0;
  }
  &.rightHandle {
    right: 0;
  }
}
</style>
